<template>
	<div class="app-container">
		<div class="outgold">
			<!-- <div class="detail-top">
				<div class="top-con">
					<span class="p1" v-if='balance || balance == 0'>企业一般户余额&nbsp;&nbsp;<span>{{balance | numFilter}}</span>&nbsp;&nbsp;元</span>
					<span class="p1" v-else>企业一般户余额&nbsp;&nbsp;<span>-</span>&nbsp;&nbsp;元</span>
					<span class="p1" v-if='totalBalance || totalBalance == 0'>平台总账户余额&nbsp;&nbsp;<span>{{totalBalance | numFilter}}</span>&nbsp;&nbsp;元</span>
					<span class="p1" v-else>平台总账户余额&nbsp;&nbsp;<span>-</span>&nbsp;&nbsp;元</span>
				</div>
			</div> -->
			<div class="outgold-tab">
				<div class="tab-con">
					<!-- <span @click='toOutput'>佣金发放明细</span>
					<span @click='todetail'>企业账单明细</span>
					<span class="active">出金明细</span> -->
					<router-link tag="a" :to="{name:'putout'}"><span class="firstSpan">佣金发放明细</span></router-link>
					<router-link tag="a" :to="{name:'detail'}"><span>企业账单明细</span></router-link>
					<router-link tag="a" :to="{name:'outgold'}"><span class="active">出金明细</span></router-link>
				</div>
			</div>
			<div class="outgold-search">
				<div class="search-con">
				  <el-form  :model="formLabel" :inline="true" class='inputBox' :label-position="toLeft" label-width="90px">
					<el-form-item label="时　间"  label-width="60px" class='set20'>
	    				<el-date-picker
					      v-model="timeCon"
					      type="daterange"
					      start-placeholder="开始日期"
					      end-placeholder="结束日期"
					      @change='getTimeCon'
					      value-format='yyyy-MM-dd'
					      :default-time="['00:00:00', '23:59:59']" size="mini"
					      :picker-options="pickerOptions"
					       class="wd260">
					    </el-date-picker>
				    </el-form-item>
				    <el-form-item label="交易类型"  label-width="80px" class='set20'>
				    	<el-select v-model="dealType" placeholder="请选择" size='mini' class='wd110'>
				    	  <el-option
						      v-for="item in dealTypes"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
					      </el-option>
					    </el-select>
				    </el-form-item>
				    <el-form-item label="搜　索"  label-width="60px">
		                <el-input v-model="formLabel.keyWord" placeholder="请输入转出方用户信息" size="mini"  class="wd260"  @keyup.enter.native="toSearch"></el-input>
		            </el-form-item>
		            <el-button type='primary' size='mini' class='wd60' @click='toSearch'>搜索</el-button>
			     </el-form>
				</div>
			</div>
			<div class="outgold-table">
				<div class="table-con">
					<el-table :data="tableData" style="width: 100%" :stripe='true' v-loading='loading'>
						<el-table-column  label="操作时间" align='left'>
							<template slot-scope='scope'>
						 		<span v-if='scope.row.creationTime'>{{scope.row.creationTime}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="转出方" align='left' width='170'>
							<template slot-scope='scope'>
						 		<div class="con-info">
						 			<span v-if='scope.row.name'>{{scope.row.name}}</span>
						 			<span v-else>-</span>
						 			<span v-if='scope.row.phoneNumber'>({{scope.row.phoneNumber}})</span>
						 			<span v-else>-</span>
						 			<span class='info1' v-if='scope.row.identityCard'>{{scope.row.identityCard}}</span>
						 			<span class='info1' v-else>-</span>
						 		</div>
						 	</template>
						</el-table-column>
						<el-table-column  label="交易类型" align='center'>
							<template slot-scope='scope'>
						 		<span v-if='scope.row.operationType == 1'>提现</span>
						 		<span v-if='scope.row.operationType == 3'>打款</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="金额" align='right'>
							<template slot-scope='scope'>
						 		<span v-if='scope.row.money || scope.row.money == 0'>{{scope.row.money | numFilter}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  :render-header='fee' width='150' align='right'>
							<template slot-scope='scope'>
						 		<p style="margin:0"><span v-if='scope.row.tax || scope.row.tax == 0'>{{scope.row.tax | numFilter}}</span>
								 	<span v-else>-</span>
								 </p>
						 		<p style="margin:0"><span v-if='scope.row.poundage || scope.row.poundage == 0'>{{scope.row.poundage | numFilter}}</span>
								 	<span v-else>-</span>
								 </p>	
						 	</template>
						</el-table-column>
						<el-table-column  label="实际到账金额" align='right'>
							<template slot-scope='scope'>
						 		<span v-if='scope.row.actionMoney || scope.row.actionMoney == 0'>{{scope.row.actionMoney | numFilter}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="转入方" align='left' width='170'>
							<template slot-scope='scope'>
						 		<div class="con-info">
						 			<span v-if='scope.row.toUserName'>{{scope.row.toUserName}}</span>
						 			<span v-else>-</span>
						 			<span v-if='scope.row.toPhoneNumber'>({{scope.row.toPhoneNumber}})</span>
						 			<span v-else>-</span>
						 			<span class='info1' v-if='scope.row.toIdentityCard'>{{scope.row.toIdentityCard}}</span>
						 			<span class='info1' v-else>-</span>
						 		</div>
						 	</template>
						</el-table-column>
						<el-table-column  label="转入账户" width='150'>
							<template slot-scope='scope'>
						 		<div class="con-info">
						 			<span v-if='scope.row.toUserBankName'>{{scope.row.toUserBankName}}</span>
						 			<span v-else>-</span>
						 			<span class='info1' v-if='scope.row.toUserBankCard'>{{scope.row.toUserBankCard}}</span>
						 			<span class='info1' v-else>-</span>
						 		</div>
						 	</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="outgold-page">
				<el-pagination @current-change="handleCurrentChange" :current-page.sync='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="pagetotal"></el-pagination>
			</div>
		</div>
	</div>

</template>

<script>
	export default{
		data(){
			return{
				toLeft:'left', //label的对齐方式
				timeCon:[], //时间具体区间
				formLabel:{}, //对象
				pickerOptions: {
		          shortcuts: [{
		            text: '最近一周',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
		              picker.$emit('pick', [start, end]);
		            }
		          }, {
		            text: '最近一个月',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
		              picker.$emit('pick', [start, end]);
		            }
		          }, {
		            text: '最近90天',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
		              picker.$emit('pick', [start, end]);
		            }
		          }]
		        },//快捷选项
		        pagetotal:0, //总页数
		        currentPage:1,//当前页
		        BeginDate:'', //开始时间
		        EndDate:'',//结束时间
		        dealTypes:[{
		        	label:'全部',
		        	value:0,
		        },{
		        	label:'提现',
		        	value:1,
		        },{
		        	label:'打款',
		        	value:2,
		        }],//交易类型
		        dealType:0, //交易默认类型
		        balance:null, //一般户余额
		        totalBalance:null, //平台余额
		        loading:false,
			}
		},
		mounted(){
			if(this.$route.query.starDate && this.$route.query.endDate){
				this.BeginDate = this.$route.query.starDate;
				this.EndDate = this.$route.query.endDate;
				this.setDefaultTime(this.$route.query.starDate,this.$route.query.endDate);
				this.currentPage = this.$route.query.pageIndex;
				this.formLabel.keyWord = this.$route.query.keyWord;
				if(this.$route.query.dealType){
					this.stateT = parseInt(this.$route.query.dealType);
				}
			}else{
				this.setFirstTime();
			}
			this.getList();
			this.getBalance();
		},
		watch:{
		  $route(to,from){
		    // console.log(to.path);
		    // console.warn('------------------------------------');
		    this.BeginDate = this.$route.query.starDate;
			this.EndDate = this.$route.query.endDate;
			this.setDefaultTime(this.$route.query.starDate,this.$route.query.endDate);
			this.currentPage = this.$route.query.pageIndex;
			this.formLabel.keyWord = this.$route.query.keyWord;
			if(this.$route.query.dealType){
				this.stateT = parseInt(this.$route.query.dealType);
			}
			this.getList();
		  }
		},
		filters:{
			numFilter(val) {
		    // 截取当前数据到小数点后两位
		    // let realVal = Number(val).toFixed(2)
		    // num.toFixed(2)获取的是字符串
		    // return Number(realVal)
		    if(val || val == 0){
		    	val = val.toString().replace(/\$|\,/g,'');
			    if(isNaN(val)) {
			      val = "0";  
			    }
			    let sign = (val == (val = Math.abs(val)));
			    val = Math.floor(val*100+0.50000000001);
			    let cents = val%100;
			    val = Math.floor(val/100).toString();
			    if(cents<10) {
			       cents = "0" + cents
			    }
			    for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
			        val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
			    }

			    return (((sign)?'':'-') + val + '.' + cents);
		    }
		  }
		},
		methods:{
			// 设置表头
			fee(){
				return (
					<div class='setP'>
							<p>代扣税金额</p>
							<p>手续费</p>
					</div>
					)
			},
			// 得到时间
			getTimeCon(){
				console.log(this.timeCon);
				this.BeginDate = this.timeCon[0];
				this.EndDate = this.timeCon[1];
			},
			// 设置初始，3个自然月
			setFirstTime(){
				var now = this.getNow();
				var before = this.get3months();
				// console.log(now);
				// console.log(before);
				this.setDefaultTime(before,now);
			},
			// 设置默认
			setDefaultTime(before,now){
				var arr = [];
				arr.push(before);
				arr.push(now);
				this.timeCon = arr;
				this.BeginDate = before;
				this.EndDate = now;
			},
			//当前时间
			getNow(){
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				return year + '-' + month + '-' + day;
			},
			// 3个自然月
			get3months(){
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1 - 3;
				// var day = date.getDate();
				var day = '01';
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				return year + '-' + month + '-' + day;
			},
			//页码
		    handleCurrentChange(val){
		    	 console.log(`每页 ${val} 条`);
		    	 this.currentPage = val;
		    	 this.$router.push({
		    		name:'outgold',
		    		query:{
		    			starDate: this.BeginDate,
			    		endDate: this.EndDate,
			    		pageIndex:this.currentPage,
			    		dealType:this.dealType,
			    		keyWord: this.formLabel.keyWord,
			    		time: new Date().getTime(),
		    		}
		    	})
		    },
		    // 余额
		    getBalance(){
		    	let params = {};
		    	this.post(params,'services/app/applets/AdminInfo').then(rs => {
		    		if(rs.success){
		    			this.balance = rs.result.balance;
		    			this.totalBalance = rs.result.totalMoney;
		    		}
		    	})
		    },
		    // 列表
		    getList(){
		    	const _this = this;
		    	_this.loading = true;
		    	let params={};
		    	if(_this.currentPage){
		    		params={
			    		beginDate : _this.BeginDate,
			    		endDate : _this.EndDate,
			    		queryKey : _this.formLabel.keyWord,
			    		pageIndex:_this.currentPage,
			    		operationType  : _this.dealType
			    	};
		    	}else{
					params={
			    		beginDate : _this.BeginDate,
			    		endDate : _this.EndDate,
			    		queryKey : _this.formLabel.keyWord ,
			    		operationType : _this.dealType
			    	};
		    	}
		    	this.post(params,'services/app/applets/AppletsOutOfGolList').then(rs => {
		    		if(rs.success){
		    			console.log(rs.result);
		    			_this.loading = false;
		    			_this.pagetotal = rs.result.totalCount;
		    			_this.tableData = rs.result.items;
		    			if(_this.$route.query.pageIndex){
		    				_this.currentPage = Number(_this.$route.query.pageIndex);
		    			}
		    		}
		    	})
		    },
		    // 搜索
		    toSearch(){
		    	const _this = this;
		    	this.$router.push({
		    		name:'outgold',
		    		query:{
		    			starDate: this.BeginDate,
			    		endDate: this.EndDate,
			    		pageIndex:1,
			    		dealType:this.dealType,
			    		keyWord: this.formLabel.keyWord,
			    		time: new Date().getTime(),
		    		}
		    	})
		    	console.log(_this.formLabel.keyWord);
		    	// this.getList();
		    },
		    // 跳页
		    toOutput(){
		    	this.$router.push({
		    		name:'putout'
		    	})
		    },
		    // 跳页
		    todetail(){
		    	this.$router.push({
		    		name:'detail'
		    	})
		    },
		    // 重新发送
		    toreSend(id){
		    	this.$router.push({
		    		name:'manageIndex',
		    		// query:{
		    		// 	id:id
		    		// }
		    	})
		    }
		}
	}

</script>

<style lang='scss' scoped>
.setP{
	padding:0;
}
.setP p{
	font-size: 12px;
	padding: 0;
    margin: 0;
    line-height: 18px;
    text-align: right;
	color:#fff;
}
.wd260{
	width: 260px;
}
.wd60{
	width: 60px;
	margin-left:20px;
}
.wd110{
	width:110px;
}
.set20{
	margin-right: 20px;
}
	.app-container{
		.outgold{
			.outgold-top{
				padding:50px 20px 20px 20px;
				.top-con{
					background-color:#eaf5fb;
					line-height: 60px;
					.p1{
						font-size: 13px;
						margin-left:20px;
						color:#95bacc;
						span{
							font-size:14px;
							font-weight: 600;
							color:#2e94c5;
						}
					}
				}
			}
			.outgold-tab{
				width:100%;
				.tab-con{
					border-bottom: 1px solid #cbcbcb;
					span{
						width:130px;
						line-height:60px;
						height: 60px;
						display: inline-block;
						text-align: center;
						font-size:16px;
						cursor: pointer;
						margin-bottom: -1px;
					}
					.firstSpan{
						margin-left:20px;
					}
					.active{
						color:#ee6000;
						background: url(../../../assets/images/bomactive2x.png) center 51px no-repeat;
					}
				}
			}
			.outgold-search{
				.search-con{
					// height:28px;
					margin:30px 20px 10px;
				}
			}
			.outgold-table{
				.table-con{
					padding:0 20px;
					font-size:13px;
					.setC{
						color:#027dca;
						cursor:pointer;
					}
					.setRed{
						color:#FF0000;
					}
					.setGreen{
						color:#389E0D;
					}
					.con-info{
						.info1{
							display:block;
							color:#999;
							font-size:12px;
						}
					}
				}
			}
			.outgold-page{
				margin:30px 0 30px 0;
				text-align:right;
				padding:0 20px;
			}
		}
	}
</style>